<template>
  <div id="about">
    <div v-html="content" class="markdown-body" v-highlight/>
    <div class="edit-button" v-show="isUser">
      <el-button @click="editClick">编辑</el-button>
    </div>
  </div>
</template>

<script>
import {getAbout} from "@/network/fileRequest";
import marked from "marked";

export default {
  name: "About",
  data() {
    return {
      content: ""
    }
  },
  methods: {
    /**
     * 网络请求
     */
    getAbout() {
      getAbout().then(res => {
        this.content = marked(res.data)
      })
    },

    /**
     * 按钮点击
     */
    editClick() {
      this.$router.replace("/user/about/edit");
    }
  },
  computed: {
    isUser() {
        const path = this.$route.path;
        if(path === "/user/about") {
          return true;
        }
        return false;
    }
  },
  created() {
    this.getAbout()
  }

}
</script>

<style scoped>
  #about {
    background: rgba(255, 255, 255, 0.9);
    padding: 40px 35px;
    box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.3);
  }

  .edit-button {
    margin-top: 20px;
    text-align: center;
  }
</style>